import React from 'react';
import { View, Text, Button, StatusBar, SafeAreaView } from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation';
import BottomTabScreen from './Views/BottomTab';

class HomeScreen extends React.Component {
  render() {
    const { navigation } = this.props;
    const msg = navigation.getParam('msg', 'NO-MSG');
    const itemId = navigation.getParam('itemId', 'NO-ID');
    return (
      <SafeAreaView style={{ flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: '#ecf0f1' }}>
        <StatusBar barStyle='dark-content' backgroundColor='#ecf0f1' />
        <Text>Home Screen</Text>
        <Text>itemId: {JSON.stringify(itemId)}</Text>
        <Text>msg: {JSON.stringify(msg)}</Text>
        <Button
          title='Go to Details'
          onPress={() => {
            /* 1. Navigate to the Details route with params */
            this.props.navigation.navigate('Details', {
              itemId     : 86,
              otherParam : 'anything you want here'
            });
          }}
        />
      </SafeAreaView>
    );
  }
}

class DetailsScreen extends React.Component {
  static navigationOptions = ({ navigation }) => {
    return {
      title            : navigation.getParam('otherParam', 'A Nested Details Screen'),
      headerStyle      : {
        backgroundColor : '#6a51ae'
      },
      headerTintColor  : '#fff',
      headerTitleStyle : {
        fontWeight : 'bold'
      }
    };
  };
  render() {
    /* 2. Get the param, provide a fallback value if not available */
    const { navigation } = this.props;
    const itemId = navigation.getParam('itemId', 'NO-ID');
    const otherParam = navigation.getParam('otherParam', 'some default value');

    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <StatusBar barStyle='light-content' backgroundColor='#6a51ae' />
        <Text>Details Screen</Text>
        <Text>itemId: {JSON.stringify(itemId)}</Text>
        <Text>otherParam: {JSON.stringify(otherParam)}</Text>
        <Button
          title='Go to Details... again'
          onPress={() =>
            this.props.navigation.push('Details', {
              itemId : Math.floor(Math.random() * 100)
            })}
        />
        <Button title='Go to Home' onPress={() => this.props.navigation.navigate('Home')} />
        <Button title='Go back' onPress={() => this.props.navigation.goBack()} />
      </View>
    );
  }
}

const routeConfigs = {
  BottomTab : {
    screen            : BottomTabScreen,
    navigationOptions : {
      header : null
    }
  },
  Home      : {
    //对应一个组件 也就是单页面
    screen            : HomeScreen,
    navigationOptions : {
      header : null
    }
  },
  Details   : {
    screen : DetailsScreen
  }
};
/**
 * 配置路由的参数
 */
const navigatorConfig = {
  initialRouteName        : 'BottomTab',
  initialRouteParams      : { msg: '欢迎来路由栈走走' },
  initialRouteKeys        : 'router',
  disableKeyboardHandling : true,
  mode                    : 'card',
  headerMode              : 'screen'
};
const createNavigator = createStackNavigator(routeConfigs, navigatorConfig);

export default createNavigator;
